<template>
  <el-dialog
    title="设置设备阈值"
    v-model="open"
    width="800px"
    append-to-body
    destroy-on-close
  >
    <el-row>
      <el-button
        type="success"
        plain
        style="width: 150px; margin-bottom: 10px"
        @click="handleAdd"
        >新增</el-button
      >
    </el-row>
    <el-row>
      <el-table
        style="width: 100%; height: 500px"
        :data="tableData"
        stripe
        border
      >
        <el-table-column label="设备Id" prop="deviceId" />
        <el-table-column label="设备名称" prop="deviceName" />
        <el-table-column label="设置字段" prop="dataCode" />
        <el-table-column label="最大值" prop="maxNum" />
        <el-table-column label="最小值" prop="minNum" />
        <el-table-column label="告警类型" prop="alertType">
          <template #default="scope">
            {{ getTypeName(scope.row.alertType) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="operation">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" link @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <!-- 分页 -->
      <el-pagination
        @current-change="currentChange"
        :current-page="pagination.curPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="pagination.total"
      />
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="400px"
    append-to-body
    destroy-on-close
  >
    <el-form :model="form" ref="formRef" label-width="100px">
      <el-form-item label="设备属性" prop="dataCode">
        <el-select v-model="form.dataCode" placeholder="请选择设备属性">
          <el-option
            v-for="item in deviceTypeList"
            :key="item.id"
            :label="item.name + '(' + item.dataCode + ')'"
            :value="item.dataCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="最大值" prop="maxNum">
        <el-input-number v-model="form.maxNum" />
      </el-form-item>
      <el-form-item label="最小值" prop="minNum">
        <el-input-number v-model="form.minNum" />
      </el-form-item>
      <el-form-item label="告警类型" prop="alarmType">
        <el-select v-model="form.alertType" placeholder="请选择告警类型">
          <el-option label="不限次数" :value="0" />
          <el-option label="每天提醒次数" :value="1" />
          <el-option label="每小时提醒次数" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSave">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue"; // 添加这行导入
import {
  getAlermList,
  delAlerm,
  getAlermDetailById,
  saveAlerm,
} from "@/api/alerm";
import { getDeviceTypeDetailById } from "@/api/deviceType";
import { ElMessage } from "element-plus";
const open = ref(false);
const form = reactive({
  id: null,
  dataCode: "",
  maxNum: 0,
  minNum: 0,
  alertType: 0,
});
const formRef = ref();
let deviceTypeList = ref([]);
let deviceId = ref("");
const deviceName = ref("");
const tableData = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const getTypeName = (type) => {
  //	提醒类型：0 不限次数 1 每天提醒次数 2 每小时提醒次数
  if (type === 0) {
    return "不限次数";
  } else if (type === 1) {
    return "每天提醒次数";
  } else if (type === 2) {
    return "每小时提醒次数";
  }
};
const handleSave = () => {
  saveAlerm({ ...form, deviceId: deviceId.value }).then((res) => {
    dialogVisible.value = false;
    ElMessage.success("保存成功");
    getList();
  });
};
const pagination = reactive({
  curPage: 1,
  pageSize: 10,
  total: 0,
});
const handleAdd = () => {
  dialogVisible.value = true;
  dialogTitle.value = "新增属性报警设置";
  form.id = null;
  form.dataCode = "";
  form.maxNum = 0;
  form.minNum = 0;
  form.alertType = 0;
};
const handleEdit = (row) => {
  getAlermDetailById(row.id).then((res) => {
    Object.assign(form, res.data);
    dialogVisible.value = true;
    dialogTitle.value = "编辑属性报警设置";
    form.id = row.id;
  });
};
const handleDelete = (row) => {
  delAlerm(row.id).then((res) => {
    ElMessage.success("删除成功");
    getList();
  });
};
function currentChange(e) {
  pagination.curPage = e;
  getList();
}
function getList() {
  getAlermList({
    deviceId: deviceId.value,
    curPage: pagination.curPage,
    pageSize: pagination.pageSize,
  }).then((res) => {
    tableData.value = res.data.list;
    pagination.total = res.data.total;
    console.log(res);
  });
}
let openDialog = (deviceData) => {
  console.log(deviceData, "deviceData");
  open.value = true;
  deviceId.value = deviceData.id;
  deviceName.value = deviceData.deviceName;
  getDeviceTypeDetailById(deviceData.deviceTypeId).then((res) => {
    deviceTypeList.value = res.data.devicePropertyList.filter(
      (f) => f.kind == 1
    );
  });
  getList();
};
defineExpose({
  openDialog,
});
</script>
